<template>
    <!-- 列表项 -->
    <view class="card">
        <view class="name item df jsb ac">
            <view class="fs-32">{{ title }}</view>
            <view v-if="isDh" class="item_right df ac" @click="openNavigationPopup">
                <image src="@/static/img/home/dh.png" class="item_image" />
                <span class="dh">导航</span>
            </view>
        </view>
        <view class="df ac" v-if="$slots.tags">
            <slot name="tags"></slot>
        </view>
        <view class="location item" v-if="address">{{ address }}</view>
        <view class="id item df jsb">
            <view>{{ noTitle }}：{{ no }}</view>
            <view class="btn df" @click="routerTo">
                <uv-icon name="list-dot" />
                <span>详情</span>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        title?: string
        address?: string
        no?: string
        isDh?: boolean
        noTitle?: string
    }>(),
    {
        title: undefined,
        address: undefined,
        no: undefined,
        isDh: true,
        noTitle: "监测点编号",
    },
)
const emits = defineEmits(["routerTo", "openNavigationPopup"])

const openNavigationPopup = () => {
    emits("openNavigationPopup")
}
const routerTo = () => {
    emits("routerTo")
}
</script>

<style lang="scss" scoped>
.card {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 10rpx;
    padding: 20rpx 32rpx;
    margin: 30rpx 30rpx 0 30rpx;
    /* border: 1px solid #80808042; */
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;

    .name {
        font-size: larger;
        font-weight: 700;
        margin-bottom: 6rpx;
    }

    .id {
        color: #999999;
        font-size: 28rpx;
    }

    .btn {
        color: green;
        font-size: 30rpx;
    }

    .item {
        margin-top: 10rpx;
    }

    .item_right {
        flex-shrink: 0;
        align-self: start;

        .item_image {
            width: 30rpx;
            height: 30rpx;
        }

        .dh {
            margin-left: 16rpx;
            font-size: 28rpx;
            color: #2b278a;
        }
    }
}
</style>
